<template>
    <view :class="isDialog=='YES'?'FormBoListDialog':'FormBoListPreviewList'">
        <rx-layout>
            <template v-slot:header
                      v-if="isTreeDialog!='YES' && mobileConf.mobileSearch.length>0 && mobileConf.mobileIsSearchView=='YES'">
                <form-bo-list-search
                    ref="search"
                    :mobileSearch="mobileConf.mobileSearch" v-model:queryParam="queryParam"
                    @search="search"/>
            </template>
            <template v-slot:center v-if="isTreeDialog=='YES'">
                <form-bo-list-tree
                    ref="table"
                    :url="'/api-form/form/core/formBoList/'+formAlias+'/getTreeJson'+query"
                    ajax-type="post"
                    data-field="result.data"
                    :idField="formBoList.idField"
                    :textField="formBoList.textField"
                    :parentField="formBoList.parentField"
                    :onlySelLeaf="onlySelLeaf=='YES'"
                    :multiSelect="formBoListData.multiSelect=='YES'"
                    :async="formBoList.isLazy=='YES'"
                    :treeStyle="formBoList.treeStyle"
                ></form-bo-list-tree>
            </template>
            <template v-slot:center v-else>
                <form-bo-list-table
                    :formBoListData="formBoListData"
                    :isDialog="formBoList.isDialog"
                    :mobileConf="mobileConf"
                    :stylize="mobileConf.mobileStyle"
                    :isLazy="false"
                    :showPage="true"
                    :defaultPageSize="10"
                    :loadDataOnstart="loadDataOnstart"
                    :queryParam="queryParam"
                    :showMobileColumns="showMobileColumns"
                    :defaultShowMobileColumns="defaultShowMobileColumns"
                    :hasMobileAllColumns="hasMobileAllColumns"
                    :columns="mobileConf.mobileCols"
                    :mobileButton="mobileConf.mobileButton"
                    :hasMobileAllRight="hasMobileAllRight"
                    :mobileBtnRight="mobileBtnRight"
                    :idField="formBoList.idField"
                    :textField="formBoList.textField"
                    data-field="result.data"
                    :parentField="formBoList.parentField"
                    :url="'/api-form/form/core/formBoList/'+formAlias+'/getData'+query"
                    ref="table"
                    :multiSelect="formBoListData.multiSelect=='YES'"
                    @initRows="initRows"

                />
                <form-bo-list-button
                    :rows="rows"
                    :mobileButton="mobileConf.mobileButton"
                    :hasMobileAllRight="hasMobileAllRight"
                    :mobileBtnRight="mobileBtnRight">
                </form-bo-list-button>
            </template>

        </rx-layout>
    </view>
</template>
<script>
import FormBoListButton from './FormBoListButton';
import RxLayout from '@/components/RxLayout'
import {onMounted, onUnmounted} from 'vue';
import FormBoListApi from "@/api/FormBoList/FormBoListApi";
import components from '../formBoList/components/index';
export default {
    name: "FormBoListPreviewList",
    mixins: [components,FormBoListButton],
    components: {
        RxLayout,
    },
    emits: ["confirm", "close"],
    props: {
        html: {
            type: String
        },
        //表单数据映射
        formdata: {
            type: Object
        },
        formAlias: {
            type: String
        },
        formJs: {
            type: Object
        },
        //是否为对话框
        isDialog: {
            type: String
        },
        //是否为树型对话框
        isTreeDialog: {
            type: String
        },
        //指定的应用
        appId: {
            type: String
        },
        //是否单选
        single: {
            type: Boolean
        },
        formBoListData:{
            type: Object
        }
    },
    data() {
        return {
            type: 'center',
            msgType: 'success',
            paramsView: {},
            isMounted: false,
            queryParam: {},
            ...this.formJs.data(),
            rows:[],//选中行数据
        }
    },
    created() {
        let self = this;
        const listener = (btn, curRow) => {
            //判断前置条件
            if(!btn.btnPreCond){
                if(!this[btn.btnClick]){
                    return;
                }
                this[btn.btnClick](curRow);
                return;
            }
            let rows=curRow?[curRow]:[];
            FormBoListApi.validPreByButton(btn.btnPreCond,rows).then(res=>{
                if(res.success){
                    this[btn.btnClick](curRow)
                }else {
                    uni.showToast({
                        title: res.message,
                        duration: 1500,
                        icon: 'none'
                    });
                }
            });
        };
        onMounted(() => {
            this.$eventBus.$on('handMethod', listener);
        });
        onUnmounted(() => {
            //删除dmo方法
            this.$eventBus.$off('handMethod', listener);
        });
        this.load();
    },
    methods: {
        load() {
            //绑定方法
            if (this.formJs.methods) {
                for (let method in this.formJs.methods) {
                    this[method] = this.formJs.methods[method];
                }
            }
            //定义监听
            if (this.formJs.watch) {
                for (let watch in this.formJs.watch) {
                    let json = this.formJs.watch[watch];
                    if (typeof json == "function") {
                        this.$watch(watch, json);
                    } else {
                        let handler = json.handler;
                        delete json.handler;
                        this.$watch(watch, handler, json);
                    }
                }
            }
            //加载方法
            if (this.formJs.created) {
                this.formJs.created.apply(this);
            }
            if (this.formJs.mounted) {
                this.formJs.mounted.apply(this);
            }
        },
        onRefresh() {
            this.$emit('onRefresh')
        },
        search(param) {
            this.$refs.table.loadData(true, false, param);
        },
        getData() {
            return this.$refs.table.getData();
        },
        initRows(data){
            this.rows = data;
        }
    }
}
</script>

<style scoped>
.FormBoListPreviewList {
    height: 100%;
}

.FormBoListDialog {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.FormBoListDialog >>> .RxLayout-header {
    padding: 0rem !important;
}

.FormBoListPreviewList >>> .RxLayout-header {
    padding: 0rem !important;
}

.FormBoListDialog > div:nth-child(1) {
    flex: 1;
    overflow: auto;
}

.custom-dialog-determine {
    display: flex;
    height: 3.5rem;
}

.custom-dialog-determine > div:nth-child(1) {
    text-align: center;
    background-color: #2e8cff;
    height: 2.5rem;
    line-height: 2.5rem;
    margin-top: .5rem;
    border-radius: 4px;
    margin-left: 1rem;
    color: white;
    flex: 1;
}

.custom-dialog-determine > div:nth-child(2) {
    text-align: center;
    background-color: #f5f7fa;
    border-radius: 4px;
    height: 2.5rem;
    line-height: 2.5rem;
    margin: 0rem 1rem;
    margin-top: .5rem;
    color: #46494d;
    flex: 1;
}
</style>
